import React, {PureComponent} from "react"
import {Redirect} from "react-router-dom"
import {connect} from "react-redux"
import {LoginWrapper, LoginBox, Input, Button} from "./style"
import {actionCreater} from "./store"

class Login extends PureComponent {

  render() {
    const {loginStatus, handleClick} = this.props
    if (!loginStatus) {
      return (
        <div>
          <LoginWrapper>
            <LoginBox>
              <Input placeholder="账号" ref={input => {
                this.account = input
              }}>
              </Input>
              <Input placeholder="密码" type="password" ref={(input) => {
                this.password = input
              }}>
              </Input>
              <Button onClick={() => handleClick(this.account, this.password)}>登录</Button>
            </LoginBox>
          </LoginWrapper>
        </div>
      )
    } else {
      return (<Redirect to="/"/>)
    }
  }
}

const mapDispatch = (dispatch) => ({
  handleClick(account, password) {
    dispatch(actionCreater.login(account, password))
  }
})

const mapState = (state) => ({
  loginStatus: state.getIn(["login", "login"])
})

export default connect(mapState, mapDispatch)(Login);
